<template>
    <div style="margin-bottom:56px">
        <v-toolbar flat color="primary">
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">社区公告</span>
           </v-toolbar-title>        
        </v-toolbar>

        <!-- 搜索框 -->
        <div style="background-color:#4caf50;height:50px">
            <v-layout class="search">
                <v-flex xs1>
                    <v-icon color="gray" id="icon">search</v-icon>
                </v-flex>
                <v-flex xs11>
                    <input type="text" v-model="newsName" placeholder="请输入新闻名称" style="height:25px;font-size:16px;width:100%;margin-top:8px" @keyup.enter="searchNews()"/>
                </v-flex>
            </v-layout>
        </div>
   
        <!-- 显示新闻 -->
        <div>
            <v-list two-line>
                <template v-for="(item,index) in news">
                    <v-list-tile :key="`item-${index}`" avatar @click="goToDetails(item.announcementId)">
                        <v-list-tile-avatar>
                            <img :src="item.attachments[0].attachmentUrl">
                        </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-title v-text="item.annoucementTitle"></v-list-tile-title>
                            <v-list-tile-sub-title v-text="item.annoucementContent"></v-list-tile-sub-title>
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider v-if="index+1<news.length" :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
        </div>
    
   </div>
</template>

<script>

export default {

    name:'post-news',


    data(){ /* 后台获取 */
        return{

            page:0,
            news:[],
            newsName:'', //用于搜索
        }
    },

    methods:{

        addItem(){
            var scrollTop=document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop
            var announcements=this.getNews()
            if(scrollTop+window.innerHeight>=document.body.offsetHeight){
                for(var i in announcements){
                    this.news.push(announcements[i])
                }
            }
        },

        getNews(){

             var newss=[];
             this.$axios({
                method:'get',
                url:this.SERVER+'/announcements/',
                params:{
                    pageNum:this.page,
                    pageSize:10,
                    title:this.newsName,
                    announcementType:1,
                },
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']['rows']
                    console.log(res)
                    for(var i in res){
                        newss.push(res[i]);
                    }
                    console.log(this.newss);
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })

            this.page++;
            return newss;
        },

        searchNews(){

            this.page=0;
            this.news=[];
            this.addItem();
            
        },

        goToDetails(id){
            this.$router.push('/community-pictorial/'+id+'/news-details');
        },
        goBack(){
            this.$router.back(-1);
        }
    },

     mounted(){
        this.addItem()
        window.addEventListener('scroll', this.addItem)
    },
    destroyed(){
        window.removeEventListener('scroll',this.addItem)
    }

}
</script>

<style scoped>

    .v-input__slot{
        margin-top:0px;
        padding-top:0px;
    }

    .layout{
        margin-left:5%;
        margin-top:2%;
    }

    input:focus{
        outline:none;
    }

    .search{
        background-color:white;
        border-radius:25px;
        margin-top:0px;
        margin-right:18px;
        height:80%
    }

    .flex.xs1{
        margin-top:8px;
        margin-left:8px;
    }

</style>
